<template>
  <div class="main">
    <div class="title">添加实体储值卡</div>
    <div class="stk_main">
      <van-form
        ref="formRef"
        validate-first
        label-width="3.2em"
        @submit="submit"
      >
        <van-field
          v-model="form.carNo"
          name="validator"
          placeholder="请输入卡号"
          label="卡号"
          type="number"
          :clearable="true"
          :error-message="errorMessage"
          :rules="[{ validator: validatorCardNo }]"
        />
        <van-field
          v-model="form.phone"
          name="validator"
          label="手机号"
          type="number"
          :clearable="true"
          placeholder="请输入实体储值卡预留手机号"
          :rules="[{ validator: validatorPhone }]"
          :error-message="errorMessagePhone"
        />
        <div style="margin: 16px;">
          <van-button
            round
            block
            type="primary"
            native-type="submit"
            size="normal"
          >
            提交
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { mapGetters } from "vuex";
import { Field, Toast, Form, Button } from "vant";

Vue.use(Form);
Vue.use(Toast);
Vue.use(Field);
Vue.use(Button);

export default {
  head() {
    return {
      title: "添加实体储值卡"
    };
  },
  data() {
    return {
      form: {
        carNo: "",
        phone: ""
      },
      errorMessage: "",
      errorMessagePhone: "",
      isDisabled: true
    };
  },
  computed: {
    ...mapGetters({
      userInfo: "authen/userInfo"
    })
  },
  created() {
    console.log(5524325, this.userInfo);
  },
  methods: {
    // 校验函数返回 true 表示校验通过，false 表示不通过
    validatorCardNo(value, rule) {
      if (!value) {
        this.errorMessage = "请输入卡号";
        return false;
      }
      if (value.length > 30) {
        this.errorMessage = "最大长度30位";
        return false;
      }
      this.errorMessage = "";
      return true;
    },
    validatorPhone(value, rule) {
      const reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (!value) {
        this.errorMessagePhone = "请输入手机号";
        return false;
      }
      if (value.length != 11) {
        this.errorMessagePhone = "请输入长度为11位数的手机号";
        return false;
      }
      if (!reg.test(value)) {
        this.errorMessagePhone = "手机号不合法";
        return false;
      }

      this.errorMessagePhone = "";
      return true;
    },
    // 表单校验成功后触发的事件
    async submit() {
      const param = {};
      param.physicalCardNo = this.form.carNo;
      param.userPhone = this.form.phone;
      param.userId = this.userInfo.userId;
      console.log(this.form);
      console.log(param);
      this.$axios
        .$get("/physicalCard/bind/appUser", {
          params: param
        })
        .then(res => {
          if (res.retCode === 0) {
            alert("绑定成功，返回列表查看");
            this.$router.replace(`/charge/?enterpriseId=${this.enterpriseId}`);
          } else {
            alert(res.message);
          }
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.main {
  width: 100vw;
  height: 95vh;
  background: rgba(0, 0, 0, 0.04);
  padding-top: 5vh;
  .title {
    font-size: 0.4rem;
    margin-bottom: 0.3rem;
    text-align: center;
  }
  .stk_main {
    width: 80vw;
    margin: auto;
    background: #fff;
    padding: 0.7rem 0.3rem;
    border-radius: 0.3rem;
  }
}

::v-deep .van-form {
  .van-field__label {
    font-size: 0.28rem;
  }
  .van-button {
    height: 0.8rem;
  }
  .van-button__content {
    font-size: 0.3rem;
  }
}
</style>
